<template>
	<view class="header-swiper w-100" style="position: relative;" v-if="banner.length > 0">
		<swiper interval="3000" circular autoplay="true" class="swiper-list w-100" @change="changeSwiper" :current="swiperCurrent" style="position: relative;" :style="{ height: swiperheight + 'rpx' }">
			<swiper-item v-for="(item,index) in banner" :key="index" style="position:relative;">
				<image :src="item.image" class="swiper-images w-100" :style="{ height: swiperheight + 'rpx' }" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="in-dicator">
			<view  v-for="(item,index) in banner.length" :key="item">
				<view class="dicator-item" :class="index == swiperCurrent ? ' active' : ''"></view>
			</view>
		</view>
	</view>
</template>

<script>	
	export default {
		components: {
		},
		data(){
			return{
				swiperCurrent: 0
			}
		},
		props:{
			banner: {
				item:Object,
				type: Array,
				default() {
					return [];
				}
			},
			swiperheight:{
				type: Number,
				default: 300
			}
		},
		methods:{
			//轮播指示
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
		}
	}
</script>

<style lang="scss">
	.in-dicator{
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		// 这里一定要注意兼容
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);			
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.dicator-item{
			width: 36rpx;
			height: 5rpx;
			transition: all .6s;
			background: rgba(255, 255, 255, 1);
			margin-right: 8rpx;
		}
		.active {
			width: 36rpx;
			height: 5rpx;
			background: $main-light-color;
		}
	}
</style>
